<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #router-view {
            width: 460px;
            height: 800px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">

        <div id="router-view">
            <!-- 路由视图 --需要改变的页面内容----页面内容-->

        </div>
        <p>
            <!-- tab-bar -->
            <a href="#/home">首页</a>
            <a href="#/me">我的</a>
        </p>
    </div>
    <script>
        // 

        // 一个页面就是 一个 路由对象
        let homePage = {
            // 页面地址路径
            path: '/home',
            // 页面内容--模板 html代码
            template: `<div>首页</div>`
        }


        // 路由数组---存放整个页面所有的路由对象信息
        let routes = [
            homePage,
            {
                path: '/me',
                template: `<div>我的</div>`

            }
        ]

        window.onhashchange = function () {
            console.log(location.hash);

            // #/me   根据 hash去 数组中 元素的path属性和 hash值一样的元素

            let path = location.hash.slice(1);
            console.log(path);

            let obj = routes.find(v => v.path === path);
            console.log(obj);
            console.log(obj.template);
            let { template } = obj;

            // document.querySelector('#router-view').innerHTML = obj.template
            document.querySelector('#router-view').innerHTML = template
        }
    </script>

</body>

</html>